<template>
  <div>
    <!-- 条件帅选 -->
    <el-form
      label-width="80px"
      :inline="true"
      size="small"
      class="search"
      v-show="showSearch"
      style="font-weight: bold"
    >
      <el-form-item label="关键字">
        <el-input placeholder="客户姓名/电话" v-model="menuName"></el-input>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select placeholder="请选择" v-model="status">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入时间">
        <el-select placeholder="请选择" v-model="status">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="search()"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="reset()"
          >重置</el-button
        ></el-form-item
      >
    </el-form>
    <!-- 新增、修改、删除按钮 -->
    <div class="header-btn">
      <div class="left">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          plain
          @click="dialogFormVisible = true"
          >新增</el-button
        >
        <el-button type="success" icon="el-icon-edit" size="mini" plain
          >修改</el-button
        >
        <el-button type="warning" icon="el-icon-download" size="mini" plain
          >导出</el-button
        >
      </div>
      <div class="right">
        <el-tooltip
          class="item"
          effect="dark"
          :content="hideSearch"
          placement="top"
        >
          <el-button
            icon="el-icon-search"
            circle
            size="mini"
            @click="clickFn"
          ></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button
            icon="el-icon-refresh"
            circle
            size="mini"
            type="primary"
            plain
            @click="search()"
          ></el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table
      ref="multipleTable"
      :data="customerData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="客户姓名" prop="name" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="电话" align="center">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        show-overflow-tooltip
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.sex === '0'">男</span>
          <span v-else-if="row.sex === '1'">女</span>
          <span v-else-if="row.sex === '2'">未知</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="inputUserName"
        label="录入人"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="entryTime"
        label="录入时间"
        show-overflow-tooltip
        align="center"
      >
        <template #default="{ row }">
          <span>{{ row.entryTime | TimeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip align="center">
        <template #default="{ row }">
          <el-button type="text" size="mini" icon="el-icon-edit"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        background
        :current-page="pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 增加修改数据 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="550px">
      <el-form
        :model="form"
        style="font-weight: bold"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item
          label="客户姓名"
          :label-width="formLabelWidth"
          prop="name"
          :rules="{
            required: true,
            message: '客户姓名不能为空',
            trigger: 'blur',
          }"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入客户姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
          <el-input
            v-model.number="form.phone"
            autocomplete="off"
            placeholder="请输入电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { customerApi, AddCustomerApi } from "@/API/hc-api/index";
import { validatePhoneNumber } from "@/utils/phoneRules";
export default {
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("客户电话不能为空"));
      } else if (!validatePhoneNumber(value)) {
        //判断用户输入的值是否符合规则
        callback(new Error("手机号码不符合规则"));
      } else {
        callback();
      }
    };

    return {
      menuName: "", //客户名称
      status: "", //状态
      customerData: [], //客户表格数据
      multipleSelection: [],
      hideSearch: "隐藏搜索",
      showSearch: true, //显示隐藏搜索
      pageSize: 10, //每页显示条数
      pageNum: 1, //当前页
      total: 0, //总页数
      dialogFormVisible: false, //显示修改页面
      form: {
        //新增的表单数据
        name: "",
        sex: "",
        phone: "",
      },
      rules: {
        phone: [
          { required: true, trigger: "blur", validator: validPhone }, //写入验证器
        ],
      },
      formLabelWidth: "80px",
      title: "修改客户档案",
    };
  },
  created() {
    this.getCustomerData();
  },
  methods: {
    // 搜索
    search() {},
    // 重置
    reset() {
      this.getCustomerData();
    },
    // 点击显示隐藏
    clickFn() {
      this.showSearch = !this.showSearch;
      if (this.showSearch) {
        this.hideSearch = "隐藏搜索";
      } else {
        this.hideSearch = "显示搜索";
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 请求表格数据
    async getCustomerData() {
      let res = await customerApi({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      this.customerData = res.rows;
      this.total = res.total;
    },
    // 改变每页显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCustomerData();
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getCustomerData();
    },
    rulesPhone() {},
    // 确定按钮
    submitForm(formName) {
      // 校验表单
      this.$refs[formName].validate(async (valid) => {
        //重点是ref绑定必须一致
        if (valid) {
          let res = await AddCustomerApi(this.form);
          console.log(res);
          this.dialogFormVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      //
    },
  },
};
</script>
<style lang="less" scoped>
.header-btn {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
/deep/ .page {
  float: right;
  margin-top: 30px;
}
/deep/ .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
  font-weight: bold;
}
/deep/ .el-table__header-wrapper,
.el-table__body-wrapper {
  margin: 20px auto;
}
</style>
